<template>
  <div class="add">
    <BaseDialog
      :title="isType === 'add' ? '新增' : '编辑'"
      width="1000px"
      v-model:visible="innerVisible"
      :renderDefaultFooter="false"
    >
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :labelWidth="120"
        :saveBtnLoading="saveBtnLoading"
        background="#fff"
        @submit="onSubmit"
        @cancel="innerVisible = false"
      >
      </MyForm>
    </BaseDialog>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from "vue";
import * as api from "@/api/index.js";
import i18n from "@/lang/index.js";
import { getSubZhEn, columnFilters } from "@/utils/mUtils.js";
import { ElMessage } from "element-plus";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  currRow: {
    type: Object,
    default: () => null,
  },
  isType: {
    type: String,
    default: "add",
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const formData = ref({
  status: "1",
});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        title: "",
        content: [
          {
            x: 0,
            y: 1,
            w: 12,
            h: 1,
            i: "1",
            label: "主产品名称",
            prop: "productName",
            type: "label_input",
            placeholder: "请输入主产品名称",
          },
          {
            x: 12,
            y: 1,
            w: 12,
            h: 1,
            i: "2",
            label: "可装重量(KG)",
            prop: "capableLoadWeight",
            precision: 2,
            type: "label_number",
            placeholder: "请输入可装重量(KG)",
          },
          {
            x: 0,
            y: 2,
            w: 12,
            h: 1,
            i: "3",
            label: "可装方数(CBM)",
            prop: "capableLoadCbm",
            precision: 2,
            type: "label_number",
            placeholder: "请输入可装方数(CBM)",
          },
        ],
      },
    ],
  },
]);
const rules = ref({
  productName: [
    {
      required: true,
      message: i18n.global.t("请输入主产品名称"),
      trigger: "change",
    },
  ],
  capableLoadWeight: [
    {
      required: true,
      message: i18n.global.t("请输入可装重量(KG)"),
      trigger: "change",
    },
  ],
  capableLoadCbm: [
    {
      required: true,
      message: i18n.global.t("请输入可装方数(CBM)"),
      trigger: "change",
    },
  ],
});
const saveBtnLoading = ref(false);
onMounted(() => {
  if (props.isType === "edit") {
    getInfo();
    return;
  }
});
const getInfo = async () => {
  saveBtnLoading.value = true;
  try {
    const { data } = await api.default.common.product.getInfo(props.currRow.id);
    formData.value = {
      ...data,
    };
    saveBtnLoading.value = false;
  } catch (err) {
    saveBtnLoading.value = false;
  }
};

const onSubmit = () => {
  const parmas = {
    ...formData.value,
  };
  if (props.isType === "add") {
    // 新增
    saveBtnLoading.value = true;
    api.default.common.product
      .add({
        ...parmas,
      })
      .then(() => {
        ElMessage.success("新增成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  } else {
    // 编辑
    saveBtnLoading.value = true;
    api.default.common.product
      .edit(parmas)
      .then(() => {
        ElMessage.success("修改成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  }
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}
</style>
